<template>
    <div :class="`bag-action-bar ${mode}`">
        <template v-if="isEdit">
            <div></div>
            <Button class="action-btn del" :style="themeBackround" :round="buttonRound" size="large" @click="deleteAction">删除</Button>
        </template>
        <template v-else>
            <div class="price title-color">
                <span class="label">￥</span>{{price}}
                <div class="origin-price tip-color" v-if="discountPrice">
                    共优惠<span class="label">￥</span>{{discountPrice}}
                </div>
            </div>
            <Button class="action-btn" :style="themeBackround" :round="buttonRound" size="large" @click="ensureAction">结算</Button>
        </template>
    </div>
</template>

<script>
import { Button } from 'vant';
import ModeMixin from '@common/mixin';
export default {
    name: 'BagActionBar', // 操作栏
    mixins: [ModeMixin],
    components: {
        Button,
    },
    props: {
        isEdit: {
            type: Boolean,
            default: false,
        },
        price: {
            type: [Number, String],
            default: 0,
        },
        discountPrice: {
            type: Number,
            default: 0,
        },
    },
    methods: {
        deleteAction() {
            this.$emit('delete');
        },
        ensureAction() {
            this.$emit('ensure');
        },
    },
};
</script>

<style lang="less">
.bag-action-bar {
    .flex();
    .mode-white();
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: @footer-height;
    background-color: @white;
    box-shadow: 0px -4px 8px 0px rgba(51,51,51,0.03);
    .p-h(@shop-gap-md);
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .price {
        .flex();
        font-size: 23px;
        color: @text-color;
        font-weight: 500;
        font-family: @font-family-number;
        align-items: baseline;
        .label {
            .m-r(-3);
        }
        .origin-price {
            font-size: @shop-font-size;
            color: @tip-color;
            opacity: 0.7;
            height: 13px;
            line-height: 13px;
            border-left: 1px solid @tip-color;
            .m-l(@shop-gap-sm);
            .p-l(@shop-gap-sm);
        }
    }
    .action-btn {
        width:124px;
        &.del {
            background-color: @red !important;
        }
    }
}
</style>
